<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<title></title>
		<style type="text/css">
			.lbox{
				margin: 30px;
				padding: 10px;
			}
			.lbox .row{
				padding: 10px 0;
				
			}
			.progress{
				margin-top: 10px;
			}
			.rbox{
				margin: 30px;
			}
			.rbox h4{
				color: #17A2B8;
				border-bottom: 1px solid #17A2B8;
				padding-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<!-- 左侧布局 -->
				<div class="col-12 col-sm-4 bg-info text-white">
					<div class="lbox">
						<img src="img/Example-ch3/jianli.JPG">
					</div>
					<div class="lbox">
						<p><span class="iconfont icon-geren"></span>年龄：</p>
						<p><span class="iconfont icon-rilitianchong"></span>工作年限：</p>
						<p><span class="iconfont icon-dianhua"></span>联系电话：</p>
						<p><span class="iconfont icon-youxiang"></span>电子邮箱：</p>
					</div>
					<h4 class="lbox">技能特长</h4>
					<!-- 栅格的嵌套 -->
					<div class="row">
						<div class="col-sm-4">
							<span>HTML5</span>
						</div>
						<div class="col-sm-8">
							<!-- 进度条 -->
							<div class="progress">
								<div class="progress-bar bg-success progress-bar-striped " style="width:99%;"></div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-4">
							<span>CSS3</span>
						</div>
						<div class="col-sm-8">
							<!-- 进度条 -->
							<div class="progress">
								<div class="progress-bar bg-info progress-bar-striped " style="width:95%;"></div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-4">
							<span>Bootstrap</span>
						</div>
						<div class="col-sm-8">
							<!-- 进度条 -->
							<div class="progress">
								<div class="progress-bar bg-danger progress-bar-striped " style="width:75%;"></div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-4">
							<span>CSS3</span>
						</div>
						<div class="col-sm-8">
							<!-- 进度条 -->
							<div class="progress">
								<div class="progress-bar bg-warning progress-bar-striped " style="width:85%;"></div>
							</div>
						</div>
					</div>
				</div>
					
				<!-- 右侧布局 -->
				<div class="col-12 col-sm-8 border ">
					<div>
						<h3>江小白的简历</h3> 
						<p>三句话，让男人为我花了五百万</p>
					</div>
					<div>
						<h4 class="rbox">求职意向</h4>
						<p>数据库管理系统运维与开发，运维工程师，Java程序员，软件开发工程师</p>
					</div>
					<div>
						<h4 class="rbox">教育背景</h4>
						<P>2020.10-2023.6&nbsp;&nbsp;武汉职业技术学院信创学院计算机应用技术专业</P>
					</div>
					<div>
						<h4 class="rbox">工作经验</h4>
						<P>2018.9-2019.6 xx互联网科技公司 Web前端实习生</P>
						<p>工作描述</p>
						<ul>
							<li>加油学习</li>
							<li>加油学习</li>
							<li>加油学习</li>
							<li>加油学习</li>
						</ul>
					</div>
					<div>
						<h4 class="rbox">自我评价</h4>
						<hr class="bg-primary">
						<ul>
							<li>加油学习</li>
							<li>加油学习</li>
							<li>加油学习</li>
							<li>加油学习</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>